<template>
  <div class="singer">
    <scroll ref="scroll"
            class = "scroll-wrapper"
            :lisen="lisen"
            :probe-type="probeType"
            @scroll="onScroll">
      <ul v-dom="calcuHeight">
        <li v-for="(group,i) in singers" :key="i" ref="listGroup">
          <h1 class = "title">{{ group.title }}</h1>
          <ul>
            <li class = "group"
                v-for = "singer in group.items"
                :key = "singer.id"
                @click="toDetailPage(singer)">
              <img v-lazy = "singer.avatar" width = "60" height = "60">
              <h2 class = "name">{{ singer.name }}</h2>
            </li>
          </ul>
        </li>
      </ul>
      <div class="fixed-title" v-show="currentTitle">{{ currentTitle }}</div>
      <ul class="fixed-shortcut"
          @touchstart.stop.prevent ="onTouchStart"
          @touchmove.stop.prevent ="onTouchMove">
        <li class="cut-item"
            :class="{'current': index == currentIndex}"
            v-for="(cut,index) in shortcuts"
            :key="index"
            :data-index="index">{{ cut }}</li>
      </ul>
    </scroll>
    <!--render component-->
    <router-view></router-view>
  </div>

</template>

<script>

    import Scroll from "@/base/scroll/Scroll";
    import {getSinger} from "@/api/singer";
    import {getData} from "@/common/js/dom";

    const CUT_HEIGHT = 24

    export default {
        name: "Singer",
        components: {Scroll},
        data() {
            return {
                singers: [],
                currentY: 0,
                currentIndex: 0
            }
        },
        computed: {
            currentTitle(){
                if (this.currentY > 0)
                    return  ''
                return this.singers[this.currentIndex] ? this.singers[this.currentIndex].title : ''
            },
            shortcuts(){
                if(!this.singers)
                    return
                return this.singers.map(item => item.title.substring(0,1))
            }
        },
        methods: {
            toDetailPage(singer){
                this.$router.push({
                    name: 'detail',
                    params: singer
                })
            },
            onTouchStart(e){
                this.touch.startIndex = getData(e.target,'index')
                this.touch.startY = e.touches[0].pageY
                this.moveTo(this.touch.startIndex)
            },
            onTouchMove(e){
                this.touch.endY = e.touches[0].pageY
                const endIndex = parseInt(this.touch.startIndex) + (this.touch.endY - this.touch.startY) / CUT_HEIGHT | 0
                this.moveTo(endIndex)
            },
            moveTo(index){
              if(!index && index !== 0)  return
              else if(index < 0)
                  index = 0
              else if(index > this.height.length-2)
                  index = this.height.length-2
              this.$refs.scroll.scrollToEle(this.$refs.listGroup[index],0)
            },
            onScroll(y) {
                this.currentY = y
            },
            async _getSinger() {
                this.singers = await getSinger()
            },
            calcuHeight(){
                let h = 0
                let list = this.$refs.listGroup
                this.height.push(h)
                for(let i = 0; i < list.length; i++){
                    let group = list[i]
                    h += group.clientHeight
                    this.height.push(h)
                }
            }
        },
        mounted() {
            this._getSinger()
        },
        created(){
            this.lisen = true
            this.probeType = 3
            this.touch = {}
            this.height = []
        },
        watch: {
            currentY(newY){
                if(newY > 0) {
                    this.currentIndex = 0
                    return
                }
                for(let i = 0; i < this.height.length - 1; i++){
                    let h1 = this.height[i]
                    let h2 = this.height[i+1]
                    if(-newY >= h1 && -newY < h2){
                        this.currentIndex = i
                        return
                    }
                }
                this.currentIndex = this.height.length - 2
            }
        }
    }
</script>

<style scoped lang = "stylus">
  @import "~common/stylus/variable"

  .singer
    height 100%
    .scroll-wrapper
      position relative
      height 100%
      overflow hidden
      .title
        height 44px
        line-height 44px
        padding-left 15px
        border-radius 10px
        //margin-top -1px     bug
        color $color-text
        background $color-highlight-background
        font-size $font-size-large

      .group
        padding 10px 20px
        display flex

        img
          border-radius 50%

        .name
          flex 1
          align-self center
          margin-left 15px
          color $color-text
          font-size $font-size-large


      .fixed-title
        position absolute
        top 0
        width 100%
        @extend .singer .scroll-wrapper .title

      .fixed-shortcut
        position fixed
        top 12%
        bottom 8%
        right 0
        width 40px
        background $color-background-d
        z-index 50
        border-radius 10px
        padding-top 1rem
        padding-bottom 1rem
        text-align center
        .cut-item
          font-size $font-size-medium
          padding 4px
          color $color-text
          &.current
            color $color-theme


</style>
